<template>
	<view class="register absolute">
		<view class="whiteBg">
			<view class="list">
				<view class="item">
					<view>
						<input type="text" placeholder="输入手机号码" v-model="account" disabled />
					</view>
				</view>
				<view class="item">
					<view class="align-left">
						<input type="number" placeholder="填写验证码" class="codeIput" v-model="captcha" />
						<button class="code bg-color-black" :disabled="disabled" :class="disabled === true ? 'on' : ''"
							@click="code">{{ text }}</button>
					</view>
				</view>
				<view class="item">
					<view>
						<input type="password" placeholder="填写您的支付密码" v-model="password" />
					</view>
				</view>
			</view>
			<view class="logon" @click="registerReset">确认</view>
		</view>
		<view class="bottom"></view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import sendVerifyCode from "@/mixins/SendVerifyCode";
	import { registerVerify, registerReset, setupPwd } from "@/api/user";
	import { validatorDefaultCatch } from "@/utils/dialog";
	import attrs, { required, alpha_num, chs_phone } from "@/utils/validate";
	export default {
		name: "RetrievePassword",
		data: function() {
			return {
				account: "",
				password: "",
				captcha: ""
			};
		},
		mixins: [sendVerifyCode],
		computed: mapGetters(['userInfo']),
		onLoad: function() {
			this.account = this.userInfo.phone
		},
		methods: {
			goLogin() {
				this.$yrouter.push({
					path: "/pages/user/Login/index"
				});
			},
			async registerReset() {
				var that = this;
				let patrn = /^[0-9]*$/;
				const {
					account,
					captcha,
					password
				} = that;
				try {
					await that
						.$validator({
							account: [
								required(required.message("手机号码")),
								chs_phone(chs_phone.message())
							],
							captcha: [
								required(required.message("验证码")),
								alpha_num(alpha_num.message("验证码"))
							],
							password: [
								required(required.message("密码")),
								alpha_num(alpha_num.message("密码"))
							]
						})
						.validate({
							account,
							captcha,
							password
						});
				} catch (e) {
					return validatorDefaultCatch(e);
				}
				
				if (that.password.length < 6) {
					uni.showToast({
						title: '支付密码最小长度不能小于6位',
						icon: "none",
						duration: 2000
					});
					return
				} else {
					if (!patrn.test(that.password)) {
						uni.showToast({
							title: '支付密码必须为6位纯数字密码',
							icon: "none",
							duration: 2000
						});
						return
					}
				}
				setupPwd(that.captcha, that.password).then(res => {
						uni.showToast({
							title: "修改成功",
							icon: "success",
							duration: 2000
						});
						setTimeout(function() {
							that.BackPage()
						}, 2000);
				
					})
					.catch(res => {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000
						});
					});
					
			},
			async code() {
				var that = this;
				const {
					account
				} = that;
				try {
					await that
						.$validator({
							account: [
								required(required.message("手机号码")),
								chs_phone(chs_phone.message())
							]
						})
						.validate({
							account
						});
				} catch (e) {
					return validatorDefaultCatch(e);
				}
				registerVerify({
						phone: that.account
					})
					.then(res => {
						uni.showToast({
							title: res.msg,
							icon: "success",
							duration: 2000
						});
						that.sendCode();
					})
					.catch(err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: "none",
							duration: 2000
						});
					});
			},
			BackPage() {
				// #ifdef H5
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}
				//使用vue-router返回上一级
				let a = this.$router.go(-1)
				if (a == undefined) {
					//重新定向跳转页面
					uni.reLaunch({
						url: '/pages/home/index'
					})
				}
				return;
				// #endif
				uni.navigateBack(1)
			}
		}
	};
</script>
<style lang="less">
	.register{
		background: #FFFFFF;
		
		.whiteBg {
			margin-top: 50rpx;
			
			.list{
				.item{
					padding: 50rpx 0 30rpx 0rpx;
				}
			}
		}
	}
</style>
